import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd';
const { Option } = Select
const userForm = forwardRef((props, ref) =>{
    const [isDisabled,setdisabled] = useState(false)
    useEffect(()=>{
        setdisabled(props.isUpdateDisable)

    },[props.isUpdateDisable])
    const {roleId,region}  = JSON.parse(localStorage.getItem("token"))
    const roleObj = {
        "1":"superadmin",
        "2":"admin",
        "3":"editor"
    }
    const checkRegionDisabled = (item)=>{
        // 区域选择 是不是更新
        if(props.isUpdate){
            // 是不是超级管理员
            if(roleObj[roleId]==="superadmin"){
                return false
            }else{
                // 不是超级管理员不能更新 因为只显示同样的区域以及同区域以下的职位，以下的职位没必要更新
                return true
            }
        }else{
            // 是不是超级管理员
            if(roleObj[roleId]==="superadmin"){
                return false
            }else{
                // 只能添加低职位的人员
                return item.value!==region
            }
        }
    }

    const checkRoleDisabled = (item)=>{
        if(props.isUpdate){
            if(roleObj[roleId]==="superadmin"){
                return false
            }else{
                return true
            }
        }else{
            if(roleObj[roleId]==="superadmin"){
                return false
            }else{
                return roleObj[item.id]!=="editor"
            }
        }
    }
    return (
        <div>
            <Form
                ref={ref}
                layout='vertical'
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="region"
                    label="区域"
                    rules={isDisabled ? []:[{ required: true, message: '请输入区域!' }]}
                >
                    <Select disabled={isDisabled}>
                        {
                            props.regionList.map(item => {
                                return <Option key={item.id} value={item.value} disabled={checkRegionDisabled(item)}>{item.title}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    name="roleId"
                    label="角色"
                    rules={[{ required: true, message: '请输入角色!' }]}
                >
                    <Select onChange={(value)=>{
                        // console.log(value)
                        if(value == 1){
                            setdisabled(true)
                            ref.current.setFieldsValue({
                                region:""
                            })
                            // console.log(ref)
                        }else{
                            setdisabled(false)
                        }
                    }}>
                        {
                            props.roleList.map(item => {
                                return <Option key={item.id} value={item.id} disabled={checkRoleDisabled(item)} >{item.roleName}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
            </Form>
        </div>
    )
})
export default userForm